<template>
    <div class="thumb-card">
            <!-- 用户信息区 -->
            <div class="userInfo-wrap">
                <!-- 用户头像 -->
                <div class="user-avatar-wrap">
                    <van-image class="user-avatar" round :src="this.thumb.thumber.avatar" fit="cover"  />
                </div>
                
                <!-- 用户名称 -->
                <div class="username-wrap">
                  <span class="van-ellipsis username">{{this.thumb.thumber.username}}</span>
                  <span class="time">{{this.thumb.time}}</span>
                </div>
            </div>
            <!-- 信息描述区 -->
            <div class="describe">
              <span>点赞了你的动态</span>
            </div>
            <!-- 动态展示区 -->
            <div class="action">
              <!-- 左部动态封面 -->
              <div class="action-face" v-if="this.thumb.thumbAction.images.length > 0">
                  <van-image class="action-face-image" :src="this.thumb.thumbAction.images[0]" fit="cover"  />
              </div>
              <!-- 右部动态描述信息 -->
              <div class="action-describe">
                  <span class="van-ellipsis action-des">{{this.thumb.thumbAction.content}}</span>
              </div>
            </div>
        </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'Thumbcard',

    props:{ 
        thumb:{ 
            type:Object
        }
    },

    data() {
        return {
            image:this.thumb.thumbAction.images[0]
        };
    },

    computed:{ 
    ...mapState("user",['user'])
  },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
/* thumb-card start */
.thumb-card { 
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 10px 10px;
  margin-bottom: 10px;
  background-color: #fff;
}

.userInfo-wrap { 
  width: 100%;
  height: 43px;
  display: flex;
  flex-direction: row;
}

.user-avatar { 
  width: 43px;
  height: 43px;
}

.username-wrap { 
  padding-left: 10px;
} 

.username {
  font-size: 18px;
  display: block;
  height: 22px;
}

.time {
  font-size: 12px;
  display: block;
  height: 21px;
  line-height: 21px;
}

.describe { 
  height: 40px;
}

.describe span{ 
  font-size: 15px;
  line-height: 40px;
}

.action { 
  height: 80px;
  display: flex;
  flex-direction: row;
  background-color: #F2F2F2;
}

.action-face {
  width: 80px;
}

.action-face-image { 
  width: 80px;
  height: 80px;
}

.action-describe { 
  width: 260px;
  padding-left: 10px;
}

.action-des{ 
  display: block;
  width: inherit;
  font-size: 15px;
  line-height: 80px;
}
/* thumb-card end */
</style>